<template>
	<view
		:style="'background: url(' + imgData.releaseBg + ') no-repeat;background-size: contain;height:' + systemInfo.screenHeight + 'px;'">
		<u-navbar title=" " :autoBack="true" bgColor="transparent" leftIconColor="#fff" :fixed="false"></u-navbar>
		<view class="p-30">
			<view class="card p-30" style="margin-top: 500rpx;">
				<view class="flex-row justify-between align-center ">
					<view class="tui-col-2 mr-10 flex-row align-center justify-center">
						<view class="num">
							1
						</view>
					</view>
					<view class="tui-col-10 fw-700 size">
						成为至尊会员发布花帖，与花友分享资源
					</view>
				</view>
				<view class="flex-row justify-between align-center">
					<view class="tui-col-2 mr-10 flex-row align-center justify-center">
						<image :src="jiantou" style="width: 30rpx;" mode="widthFix"></image>
					</view>
					<view class="tui-col-10">
					</view>
				</view>
				<view class="flex-row justify-between align-center">
					<view class="tui-col-2 mr-10 flex-row align-center justify-center">
						<view class="num">
							2
						</view>
					</view>
					<view class="tui-col-10 ">
						<view class="fw-700 size">
							其他用户解锁花帖，获得一定比例解锁收益，收益暂时冻结
						</view>
						<view class="small-size" style="color: ;">
							(可在我的花帖中查看)
						</view>
					</view>
				</view>
				<view class="flex-row justify-between align-center">
					<view class="tui-col-2 mr-10 flex-row align-center justify-center">
						<image :src="jiantou" style="width: 30rpx;" mode="widthFix"></image>
					</view>
					<view class="tui-col-10">
					</view>
				</view>
				<view class="flex-row justify-between align-center">
					<view class="tui-col-2 mr-10 flex-row align-center justify-center">
						<view class="num">
							3
						</view>
					</view>
					<view class="tui-col-10 fw-700 size">
						7日内花帖无投诉元宝解冻到账
					</view>
				</view>
			</view>
			<view class="info">
				<view class="size fw-700 mt-30 mb-30">
					他们已经在花名册赚钱
				</view>
				<view class="">
					<u-grid :border="false" col="4">
						<u-grid-item v-for="(item,index) in list" :key="index">
							<u-avatar :src="item.user.avatar"></u-avatar>
							<view class="size ellipsis text-center size" style="width: 180rpx;">{{item.user.nickname}}</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<view style="margin-top: 90rpx;">
				<u-button @click="set" :loading="loading" :customStyle="{'color':'#E82446'}" shape="circle"
					color="linear-gradient(91deg, #FFD486 0%, #FFECCC 100%)" text="开通会员，立即发帖赚钱"></u-button>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getPost,
		setPost
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	import img from '@/mixins/img.js';
	export default {
		mixins: [commonMixin, img],
		data() {
			return {
				loading: false,
				list: []
			}
		},
		onLoad() {
			this.initData();
		},
		methods: {
			initData() {
				getPost().then(res => {
					console.log('getPost', res);
					this.list = res
				})
			},
			set() {
				uni.redirectTo({
					url:'/pages/mine/vip'
				})
			}
		}
	}
</script>


<style>
	page {
		background-color: #FE5366;
	}

	.card {
		background: linear-gradient(180deg, #FFF1D6 0%, #FFE8C8 100%);
		color: #BA5715;
	}

	.num {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #FE5366;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-weight: bold;
		font-size: 32rpx;
	}

	.info {
		color: #fff;
	}
</style>